'use strict';
AKONG.require(['config', 'ua', 'query', 'req', 'others', 'Loading', 'AutoPlay'], function(config, ua, query, req, others, Loading, AutoPlay) {
	//diy面板
	var $diy_panel_model_div = $('.diy_panel_model').children(),
		diy_panel_index = 0,
		$woddz_mask = $('.woddz_mask'),
		$loadMask_num = $('.loadMask_num'),
		$calc_img = $('.calc_img'),
		$google_tishi = $('.google_tishi'),
		$tishidialog0 = $('.tishidialog0'),
		tishidialog_id = null;

	//svg部分
	var load_svg = document.getElementsByClassName("load_svg")[0],
		urlPath = query.url('path'),
		svgPath = '../../models/' + (urlPath || '15-MC02072') + '/',
		svgName = '1.svg',
		ns = 'http://www.w3.org/2000/svg',
		xl = 'http://www.w3.org/1999/xlink',
		lianUrl = '',
		lianImg = null,
		svg,
		cur = {
			colorList: null,
			svgData: null
		},
		activeColor = null,
		svgData = [],
		imageData = [],
		svgMouse = {
			x: 0,
			y: 0
		},
		dataMouse = {},
		isTest = query.url('test') || false,
		isDown = false;
	window.cur = cur;
	var $diy_dialog = $('.diy_dialog'),
		$diy_dialog_c = $diy_dialog.children(),
		$diy_panel_name = $('.diy_panel_name'),
		$diy_panel_color = $('.diy_panel_color'),
		$diy_svgs = $('.diy_svgs'),
		$color_title = $('.color_title'),
		$colors_ul = $('.colors_ul'),
		$diy_svgs_colors = $('.diy_svgs_colors'),
		$diy_svgs_tab_li = $('.diy_svgs_tab').children(),
		$diy_svgs_divs = $('.diy_svgs_div').children(),
		$image_list = $('.image_list'),
		text_input = document.getElementById("text_input"),
		opcity_input = document.getElementById("opcity_input"),
		$name_c,
		$color_c,
		diy_panel_name_index,
		diy_panel_color_index,
		svgs_tab_index = 0,
		diy_dialog_offset = {
			left: 0,
			top: 0
		};
	var $name_select = $('.name_select'),
		$diy_panel_name2 = $('.diy_panel_name2'),
		$diy_dialog = $('.diy_dialog'),
		$color_name = $('.color_name'),
		$activeName2,
		activeName2Obj = {
			li: '',
			name: '',
			color: '',
			name2: '',
			name3: ''
		},
		text_family = $('.text_family')[0],
		fontTest = $('.fontTest')[0],
		family = {};
	window.svgData = svgData;
	window.imageData = imageData;

	function initSvg() {
		$.ajax({
			url: svgPath + svgName,
			dataType: 'text',
			success: function(result) {
				load_svg.innerHTML = result;
				svg = $(load_svg).children()[0];
				canvasToSvg(initThree);
			},
			error: function(e) {
				alert(e);
			}
		});
	}

	function saveSvg() {
		return svg.outerHTML;
	}
	window.saveSvg = saveSvg;

	function initEvent() { //加载所有东西开始玩
		//名称模式
		(function() {
			var html = '',
				html2 = '<option>全部图案</option>',
				$parts = $('.load_svg [data-name^="part-"]'),
				getColor = function(d) {
					var n = d.nodeName;
					if(n === 'use') {
						return $('#' + d.href.baseVal.substr(1)).css('fill');
					} else if(n === 'g') {
						return $(d).children().eq(0).css('fill');
					} else {
						return $(d).css('fill');
					}
				},
				getB = function(g) {
					var h = '<li data-name="' + g.getAttribute('data-name') + '" data-name2="' + g.getAttribute('data-name2') + '"><h2>' + g.getAttribute('data-name2') + '图案</h2>',
						s = g.querySelectorAll('[data-name^="color-"]'),
						o = {},
						i = 0;
					$.each($(s), function(i) {
						var name = this.getAttribute('data-name').split('-')[1],
							color = $(this).css('fill');
						//						console.log(name);
						if(!o[name]) {
							i++;
							o[name] = true;
							h += '<div data-name="color-' + name + '" data-name2="图案' + name + '">图案' + name + '<div class="color_div" style="background-color:' + getColor(this) + ';"></div></div>';
						}
					});
					!s.length && (h += '<div>无图案</div>');
					return h + '</li>';
				},
				getPath = function() {
					var i = $name_select[0].selectedIndex,
						htmll = '';
					if(i) {
						var v = $name_select[0].value,
							g = $('.load_svg [data-name="' + v + '"]');
						htmll += getB(g[0]);
					} else {
						$parts.each(function(i2) {
							htmll += getB(this);
						});
					}
					$diy_panel_name2.html(htmll);
				};
			$parts.each(function(i) {
				var name = this.getAttribute('data-name').split('-')[1],
					name2 = this.getAttribute('data-name2');
				html += '<li data-name="part-' + name + '">' + name2 + '</li>';
				html2 += '<option value="part-' + name + '">' + name2 + '</option>';
			});
			$diy_panel_name.html(html);
			$name_select.html(html2);

			html = '';
			$parts.each(function(i) {
				var name = this.getAttribute('data-name').split('-')[1],
					g = this,
					clip = $(g).children()[0],
					box = clip.getBBox(),
					g = this.cloneNode(true),
					s = Math.max(box.width, box.height) / (box.width / box.height >= 340 / 252 ? 340 : 252);

				svgData.push({
					box: box,
					name: name,
					scale: s
				});
				html += '<div><svg width="100%" height="100%" viewBox="' + box.x + ' ' + box.y + ' ' + box.width + ' ' + box.height + '">' + g.outerHTML + '</svg></div>';
			});
			$diy_svgs.html(html);
			$diy_svgs.children().each(function(i) {
				svgData[i].svg = $(this).children()[0];
				var $self = $(this).children();
				$.each(this.querySelectorAll('.svg_contain'), function(i2) {
					$self.append(this);
					var svgDataC = svgData[i];

					var node = $(this).children()[0],
						self = this,
						time = this.getAttribute('data-time');
					if(node.nodeName === 'image') {
						addEdit(self, time, 0, svgDataC.scale);
					} else {
						addEdit(this, time, node.getAttribute('font-size'), svgDataC.scale);
					}
				});
			});
			$diy_svgs.children().addClass('hide');

			$name_c = $diy_panel_name.children();
			$name_select.on('change', function() {
				var v = this.value,
					i = this.selectedIndex,
					preIndex = diy_panel_name_index;
				i = i ? i - 1 : 0;
				getPath();
				if(typeof preIndex === 'number') {
					$name_c.eq(preIndex).removeClass('active');
					$diy_svgs.children().eq(preIndex).addClass('hide');
				}
				diy_panel_name_index = i;
				$(this).addClass('active');
				$diy_dialog.addClass('active0');
				$diy_svgs.children().eq(diy_panel_name_index).removeClass('hide');
				cur.svgData = svgData[diy_panel_name_index];
				$diy_dialog.addClass('hide');
				activeColor = $(cur.svgData.svg).find('[data-name="bgColor"]');
				activeName2Obj.li = '';
				activeName2Obj.name = '';
				activeName2Obj.color = '';
				activeName2Obj.name2 = '';
				activeName2Obj.name3 = '';
				winResize();

				$diy_svgs_tab_li.eq(0).trigger('click', true);
			});
			$diy_panel_name2.on('click', 'div[data-name]', function() {
				if($activeName2) {
					$activeName2.removeClass('active');
					$diy_dialog.addClass('hide');
				}
				$activeName2 = $(this);
				$activeName2.addClass('active');
				$diy_dialog.removeClass('hide');
				activeName2Obj.li = $activeName2;
				activeName2Obj.name = $activeName2.parent().attr('data-name');
				activeName2Obj.name2 = $activeName2.parent().attr('data-name2');
				activeName2Obj.name3 = $activeName2.attr('data-name2');
				activeName2Obj.color = $activeName2.attr('data-name');

				$color_name.text(activeName2Obj.name2 + activeName2Obj.name3 + ' - 颜色更改');
				//								console.log(activeName2Obj);
			});
			$('.color_close').on('click', function() {
				if($activeName2) {
					$activeName2.removeClass('active');
					$diy_dialog.addClass('hide');
				}
			});
			/*$name_c.on('click', function() {
				var i = $(this).index(),
					preIndex = diy_panel_name_index;
				if(preIndex === i) {
					return;
				}
				if(typeof preIndex === 'number') {
					$name_c.eq(preIndex).removeClass('active');
					$diy_svgs.children().eq(preIndex).addClass('hide');
				}
				diy_panel_name_index = i;
				$(this).addClass('active');
				$diy_dialog.addClass('active0');
				$diy_svgs.children().eq(diy_panel_name_index).removeClass('hide');
				cur.svgData = svgData[diy_panel_name_index];
				activeColor = $(cur.svgData.svg).children().children().children()[0];

				winResize();
			});
			$name_c.on('mouseenter', function() {
				var name = this.getAttribute('data-name').split('-')[1];
				if(activeMesh && activeMesh.name !== name) {
					activeMesh.material.opacity = 1;
				}
				mesh.traverse(function(child) {
					if(child instanceof THREE.Mesh) {
						if(child.name === name) {
							activeMesh = child;
							activeMesh.material.opacity = 0.5;
						}
					}
				});
				render();
			}).on('mouseleave', function() {
				if(activeMesh && activeMesh.material.opacity !== 1) {
					activeMesh.material.opacity = 1;
					render();
				}
			});*/
			$name_select.trigger('change', true);
		})();

		//颜色模式
		(function(l) {
			//选色卡
			var html = '';
			for(var i = 0, step = 1 / l; i <= l; i++) {
				var rgb = hslToRgb(i * step, 1, 0.5),
					color = 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')';
				html += '<li data-color="' + color + '" style="background-color:' + color + '"></li>';
			}
			for(var i = 0, step = 1 / 9; i < 10; i++) {
				var w = 255 * i * step >> 0,
					color = 'rgb(' + w + ',' + w + ',' + w + ')';
				html += '<li data-color="' + color + '" style="background-color:' + color + '"></li>';
			}
			$colors_ul.html(html);
			$diy_svgs_colors.html(html);

			//颜色选择（花纹部位）
			$colors_ul.children().each(function(i) {
				var color = this.getAttribute('data-color');
				$(this).on('click', function(i) {
					/*if(cur.colorList) {
						$color_title.attr('data-name', 'color-' + color);
						$color_title.children().css('background-color', color);
						$color_c.eq(diy_panel_color_index).html($color_title.html());
						cur.colorList.each(function() {
							this.style.fill = color;
							this.setAttributeNS(null, 'fill', color);
						});
						canvasToSvg();
					}*/
					//					console.log(activeName2Obj);
					if(activeName2Obj.name) {
						//						console.log(activeName2Obj);
						activeName2Obj.li.children().css('background-color', color);
						$('svg [data-name="' + activeName2Obj.name + '"] [data-name="' + activeName2Obj.color + '"]').each(function() {
							var n = this.nodeName;
							if(n === 'use') {
								var d = document.getElementById(this.href.baseVal.substr(1));
								d.style.fill = color;
								d.setAttributeNS(null, 'fill', color);
							} else if(n === 'g') {
								$(this).children().each(function() {
									var n2 = this.nodeName;
									if(n2 === 'use') {
										var d = document.getElementById(this.href.baseVal.substr(1));
										d.style.fill = color;
										d.setAttributeNS(null, 'fill', color);
									} else {
										this.style.fill = color;
										this.setAttributeNS(null, 'fill', color);
									}
								});
								return $(d).children().eq(0).css('fill');
							} else {
								this.style.fill = color;
								this.setAttributeNS(null, 'fill', color);
							}
							//							console.log(this);
						});
						canvasToSvg();
					}
				});
			});
			//颜色选择（背景部位和文字）
			$diy_svgs_colors.children().each(function(i) {
				var color = this.getAttribute('data-color');
				$('.diy_svgs_colors').on('mouseup', function(e) {
					e.stopPropagation();
				});
				$(this).on('click', function(i) {
					if(svgs_tab_index === 0) {
						if(activeColor) {
							//							console.log(activeColor);
							$(activeColor).each(function() {
								if(this.nodeName === 'use') {
									var id = this.href.baseVal.substr(1),
										u = document.getElementById(id);
									u.style.fill = color;
									u.setAttributeNS(null, 'fill', color);

								} else if(this.nodeName === 'g') {
									$(this).children().each(function() {
										var n2 = this.nodeName;
										if(n2 === 'use') {
											var d = document.getElementById(this.href.baseVal.substr(1));
											d.style.fill = color;
											d.setAttributeNS(null, 'fill', color);
										} else {
											this.style.fill = color;
											this.setAttributeNS(null, 'fill', color);
										}
									});
								} else {
									this.style.fill = color;
									this.setAttributeNS(null, 'fill', color);
								}
							});
							updateSvg();
							updateSvg(3);
						}
					} else {
						if(cur.imageData && cur.imageData.active && cur.imageData.text) {
							cur.imageData.text.style.fill = color;
							cur.imageData.text.setAttributeNS(null, 'fill', color);
							updateSvg(2);
						}
					}
				});
			});

			var colorObj = {};
			html = '';
			$('.load_svg [data-name^="color-"]').each(function(i) {
				var name = this.getAttribute('data-name').split('-')[1],
					color = $(this).css('fill');
				if(!colorObj[name]) {
					colorObj[name] = true;
					html += '<li data-name="color-' + name + '">颜色' + name + '<div class="color_div" style="background-color:' + color + ';"></div></li>';
				}
			});
			$diy_panel_color.html(html);

			$color_c = $diy_panel_color.children();
			$color_c.on('click', function() {
				var i = $(this).index(),
					preIndex = diy_panel_color_index;
				if(preIndex === i) {
					return;
				}
				if(typeof preIndex === 'number') {
					$color_c.eq(preIndex).removeClass('active');
				}
				diy_panel_color_index = i;
				$(this).addClass('active');
				$diy_dialog.addClass('active1');

				var color = $(this).attr('data-name');
				$color_title.html(this.innerHTML);
				cur.colorList = $('.load_svg [data-name="' + color + '"]');
			});
		})(69);

		//选择字体
		text_family.addEventListener('keydown', function(e) {
			e.preventDefault();
		});
		text_family.addEventListener('change', function() {
			var v = this.value;
			if(cur.imageData && cur.imageData.text) {
				if(this.selectedIndex) {
					if(cur.imageData.family === v) {
						return;
					}
					if(family[v]) {
						cur.imageData.family = v;
						cur.imageData.text.style.fontFamily = v;
						xiuGaiText(v);
					} else {
						fontSpy(v, {
							success: function() {
								cur.imageData.family = v;
								cur.imageData.text.style.fontFamily = v;
								xiuGaiText(v);
							},
							failure: function() {
								alert('字体加载失败');
							}
						});
					}

				} else {
					//系统字
					if(!cur.imageData.family) {
						return;
					}
					cur.imageData.family = 0;
					cur.imageData.text.style.fontFamily = '微软雅黑';
					xiuGaiText(0);
				}
			}
		});

		$diy_svgs_tab_li.on('click', function() {
			var i = $(this).index();
			if(i === svgs_tab_index) {
				return;
			}
			$diy_svgs_tab_li.eq(svgs_tab_index).removeClass('active');
			$diy_svgs_divs.eq(svgs_tab_index).addClass('hide');
			svgs_tab_index = i;
			$diy_svgs_divs.eq(svgs_tab_index).removeClass('hide');
			$diy_svgs_tab_li.eq(svgs_tab_index).addClass('active');
			if(activeColor) {
				//activeColor.removeAttribute('data-active');
				activeColor = null;
				if(cur.svgData.svg) {
					activeColor = $(cur.svgData.svg).find('[data-name="bgColor"]');
				}
			}
			if(cur.imageData && cur.imageData.type === '') {
				cur.imageData.contain.setAttribute('class', 'svg_contain');
				cur.imageData = null;
			}
		});
		//添加文字
		$(text_input).next().on('click', function() {
			if(cur.svgData && text_input.value) {
				if(cur.imageData && cur.imageData.active && cur.imageData.text) {
					var v = text_input.value;
					if(cur.imageData.text.textContent === v) {
						return;
					}
					cur.imageData.text.textContent = v;
					xiuGaiText(0);
				} else {
					addText(text_input.value);
				}
			}
			//			cur.svgData && text_input.value && addText(text_input.value);
		});
		$(text_input).parent().on('mouseup', function(e) {
			e.stopPropagation();
		});
		//图片透明度
		$(opcity_input).next().on('click', function() {
			var v = +opcity_input.value;
			if(cur.imageData && typeof v === 'number') {
				cur.imageData.image.setAttribute('opacity', v / 100);
				updateSvg(2);
			}
		});
		//上传图片
		$('#file_input').on('change', function() {
			var fs = this.files;
			if(fs) {
				for(var i = 0, l = fs.length; i < l; i++) {
					(function(f) {
						var src = URL.createObjectURL(f);
						if(f.type == 'image/svg+xml') {
							$.ajax({
								url: src,
								dataType: 'text',
								success: function(result) {
									var temp_svg = $(result)[0],
										viewBox = temp_svg.getAttribute('viewBox');
									var temp_ary = viewBox.split(' ');
									//为svg添加宽高属性
									var w = temp_ary[2],
										h = temp_ary[3];
									$(temp_svg).attr({
										'width': w,
										'height': h
									});
									$('#uploadSvg').contents().find('body').html($(temp_svg)[0].outerHTML);
									src = ajaxFileUploadWithId(i, $(temp_svg)[0].outerHTML, 'svg');
									$image_list.prepend('<li style="background-image:url(' + src + ')" data-src="' + src + '"></li>');
								}
							});
						} else {
							var img = new Image();
							img.onload = function() {
								var w = this.naturalWidth || this.width,
									h = this.naturalHeight || this.height;
								if(w * h < 1000000) {
									$tishidialog0.fadeIn(500,function(){
										tishidialog_id = setTimeout(function(){
											$tishidialog0.fadeOut(500);
										},5000);
									});
									return;
								}
								src = ajaxFileUploadWithId(i);
								$image_list.prepend('<li style="background-image:url(' + src + ')" data-src="' + src + '"></li>');
							}
							img.src = src;
						}

					})(fs[i]);
				}
			}
		});
		//选择图片
		$image_list.on('click', function(e) {
			var that = e.target,
				src = that.getAttribute('data-src');
			cur.svgData && src && addImage(src);
		});
//		addImage('https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png');
		//修改现在的文字
		function xiuGaiText(v) {
			var l = getFontLine(v).line;
			var box = cur.imageData.text.getBBox(),
				ow = box.width - cur.imageData.width,
				oy = box.height - cur.imageData.height;
			cur.imageData.width = box.width;
			cur.imageData.height = box.height;
			cur.imageData.aspect = box.width / box.height;
			cur.imageData.x -= ow / 2;
			cur.imageData.y -= oy / 2;
			cur.imageData.aspect2 = cur.imageData.size / box.height;
			cur.imageData.text.setAttribute('x', cur.imageData.x);
			cur.imageData.text.setAttribute('y', cur.imageData.y + cur.imageData.height * l);
			cur.imageData.editBox.setAttribute('x', cur.imageData.x);
			cur.imageData.editBox.setAttribute('y', cur.imageData.y);
			cur.imageData.editBox.setAttribute('width', cur.imageData.width);
			cur.imageData.editBox.setAttribute('height', cur.imageData.height);
			var box2 = cur.imageData.contain.querySelectorAll('[data-type]')[2].getBoundingClientRect(),
				cr = cur.imageData.contain.getElementsByTagName('circle')[0].getBoundingClientRect();
			cur.imageData.clientRect = {
				left: cr.left,
				top: cr.top
			};
			cur.imageData.offsetRotate = (Math.atan2(box2.top + box2.height / 2 - cur.imageData.clientRect.top, box2.left + box2.width / 2 - cur.imageData.clientRect.left) * 180 / Math.PI >> 0) - cur.imageData.rotate;
			updateSvg(2);
		}
		//添加编辑功能
		function addEdit(contain, time, type, scaleC) {
			cur.imageData && cur.imageData.contain && cur.imageData.contain.setAttribute('class', 'svg_contain');
			if(type === 0) {
				var image = contain.getElementsByTagName('image')[0],
					editBox = contain.getElementsByTagName('svg')[0],
					circle = contain.getElementsByTagName('circle')[0],
					btns = contain.querySelectorAll('[data-type]'),
					box = image.getBBox(),
					box2 = btns[2].getBoundingClientRect(),
					cr = circle.getBoundingClientRect(),
					dataObj = {
						contain: contain,
						image: image,
						active: true,
						circle: circle,
						editBox: editBox,
						time: time,
						type: '',
						center: {
							ox: box.width / 2,
							oy: box.height / 2,
							x: box.x + box.width / 2,
							y: box.y + box.height / 2
						},
						clientRect: {
							left: cr.left,
							top: cr.top
						},
						width: box.width,
						height: box.height,
						aspect: box.width / box.height,
						rotate: 0,
						offsetRotate: 0,
						x: box.x,
						y: box.y,
						translateX: 0,
						translateY: 0,
						scaleDistance: 0,
						sceneScale: scaleC || cur.svgData.scale
					};
				var t = contain.getAttribute('transform') || '';
				if(t.indexOf('rotate') > -1) {
					dataObj.rotate = +t.match(/rotate\((.*?)[,\s\)]/i)[1];
				}
				dataObj.offsetRotate = (Math.atan2(box2.top + box2.height / 2 - dataObj.clientRect.top, box2.left + box2.width / 2 - dataObj.clientRect.left) * 180 / Math.PI >> 0) - dataObj.rotate;
				imageData.push(dataObj);
				cur.imageData = dataObj;
			} else {
				var text = contain.getElementsByTagName('text')[0],
					editBox = contain.getElementsByTagName('svg')[0],
					circle = contain.getElementsByTagName('circle')[0],
					btns = contain.querySelectorAll('[data-type]'),
					box = text.getBBox(),
					box2 = btns[2].getBoundingClientRect(),
					cr = circle.getBoundingClientRect(),
					dataObj = {
						contain: contain,
						active: true,
						text: text,
						circle: circle,
						editBox: editBox,
						time: time,
						type: '',
						center: {
							ox: box.width / 2,
							oy: box.height / 2,
							x: box.x + box.width / 2,
							y: box.y + box.height / 2
						},
						clientRect: {
							left: cr.left,
							top: cr.top
						},
						width: box.width,
						height: box.height,
						aspect: box.width / box.height,
						aspect2: +type / box.height,
						size: +type,
						family: 0,
						rotate: 0,
						offsetRotate: 0,
						x: box.x,
						y: box.y,
						translateX: 0,
						translateY: 0,
						scaleDistance: 0,
						sceneScale: scaleC || cur.svgData.scale
					};
				var t = contain.getAttribute('transform') || '';
				if(t.indexOf('rotate') > -1) {
					dataObj.rotate = +t.match(/rotate\((.*?)[,\s\)]/i)[1];
				}
				dataObj.offsetRotate = (Math.atan2(box2.top + box2.height / 2 - dataObj.clientRect.top, box2.left + box2.width / 2 - dataObj.clientRect.left) * 180 / Math.PI >> 0) - dataObj.rotate;
				imageData.push(dataObj);
				cur.imageData = dataObj;
			}!scaleC && contain.setAttribute('class', 'svg_contain active');
			contain.addEventListener('mousedown', function(e) {
				e.stopPropagation();
				e.preventDefault();
				dataObj.active = true;
				this.setAttribute('class', 'svg_contain active');
				getMouse(e, dataObj, 'translate');
				if(type) {
					text_input.value = dataObj.text.textContent;
					if(cur.imageData.family) {
						text_family.value = cur.imageData.family;
					} else {
						text_family.selectedIndex = 0;
					}
					$diy_svgs_tab_li.eq(1).trigger('click', true);
				} else {
					$diy_svgs_tab_li.eq(2).trigger('click', true);
				}
			});
			Array.prototype.slice.call(btns).forEach(function(v, i) {
				var type = v.getAttribute('data-type');
				v.addEventListener('mousedown', function(e) {
					e.stopPropagation();
					e.preventDefault();
					if(type === 'delete') {
						$('[data-time="' + time + '"]').remove();
						cur.imageData = null;
						updateSvg();
						return;
					} else if(type === 'copy') {
						//							cur.svgData.svg.appendChild(cur.imageData.contain.cloneNode(true));
						return;
					} else {
						getMouse(e, dataObj, type);
					}
				});
			});
		}

		function getMouse(e, dataObj, type) {
			isDown = true;
			svgMouse.x = e.pageX;
			svgMouse.y = e.pageY;
			if(cur.imageData && cur.imageData.type === '' && cur.imageData !== dataObj) {
				cur.imageData.contain.setAttribute('class', 'svg_contain');
			}
			cur.imageData = dataObj;
			cur.imageData.type = type;
			var cr = cur.imageData.circle.getBoundingClientRect();
			cur.imageData.clientRect.left = cr.left;
			cur.imageData.clientRect.top = cr.top;
			cur.imageData.scaleDistance = Math.sqrt(Math.pow(e.clientX - cr.left, 2) + Math.pow(e.clientY - cr.top, 2)) >> 0;
			copyObj(cur.imageData, dataMouse);
		}

		function copyObj(oldObj, newObj) {
			for(var i in oldObj) {
				newObj[i] = oldObj[i];
			}
		}
		//获取文字基线的在文字高度的位置
		function getFontLine(fa) {
			var f = fa ? fa : '微软雅黑';
			if(family[f]) {
				return family[f];
			} else {
				fontTest.innerHTML = '<text style="font-family:' + f + '" font-size="100">x</text>';
				var t = fontTest.childNodes[0],
					b0 = fontTest.getBoundingClientRect(),
					b1 = t.getBoundingClientRect(),
					v0 = b0.top - b1.top,
					h0 = b1.height;
				family[f] = {
					line: v0 / h0
				};
				t.setAttribute('y', v0);
				return family[f];
			}

		}
		//添加文字
		function addText(value) {
			var curSvg = cur.svgData.svg,
				curScale = cur.svgData.scale,
				curBox = cur.svgData.box,
				g = document.createElementNS(ns, 'g'),
				t = Date.now(),
				state = curBox.width > curBox.height,
				size = 0,
				w2 = 26 * curScale;
			if(state) {
				size = curBox.width / 10;
			} else {
				size = curBox.height / 10;
			}

			g.setAttribute('class', 'svg_contain active');
			g.setAttribute('data-time', t);
			g.innerHTML = '<text font-size="' + size + '" text-anchor="start">' + value + '</text><svg class="svg_edit"><rect width="100%" height="100%" fill="none" stroke="none" stroke-width="' + (1 * curScale) + '"></rect>' +
				'<image width="' + w2 + '" height="' + w2 + '" x="-' + w2 + '" y="-' + w2 + '" data-type="delete" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../images/3d/btn_4.png"/>' +
				'<image width="' + w2 + '" height="' + w2 + '" x="100%" y="-' + w2 + '" data-type="scale" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../images/3d/btn_5.png"/>' +
				'<image width="' + w2 + '" height="' + w2 + '" x="100%" y="100%" data-type="rotate" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../images/3d/btn_6.png"/>' +
				//'<image width="' + w2 + '" height="' + w2 + '" x="-' + w2 + '" y="100%" data-type="copy" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../../images/3d/btn_7.png"/>' +
				'<circle r="1" cx="50%" cy="50%" fill="transparent"></circle>' +
				'</svg>';

			curSvg.appendChild(g);

			var text = g.childNodes[0],
				svg_edit_a = text.nextSibling,
				box = text.getBBox(),
				w = box.width,
				h = box.height,
				x = curBox.x + (curBox.width - w) / 2,
				y = curBox.y + (curBox.height - h) / 2;

			var l = getFontLine(0);

			text.setAttribute('x', x);
			text.setAttribute('y', y + h * l.line);
			svg_edit_a.setAttribute('x', x);
			svg_edit_a.setAttribute('y', y);
			svg_edit_a.setAttribute('width', w);
			svg_edit_a.setAttribute('height', h);

			text_family.selectedIndex = 0;
			addEdit(g, t, $(g).children()[0].getAttribute('font-size'));
			updateSvg(1);
		}

		//图片上传
		function ajaxFileUploadWithId(i, data, type) {

			var qiniuCfg = {};
			var fileList = {};
			$.ajax({
				type: "get",
				url: "http://www.buerdiy.com/ajax/qiniuToken/3",
				data: {},
				dataType: "json",
				async: false,
				success: function(_data) {
					qiniuCfg.qiniuUpToken = _data.data;
					qiniuCfg.qiniuUrl = _data.qiniuUrl;
					qiniuCfg.showFormat = _data.showFormat;
				}
			});

			var inputObj = $("input[type=file]");
			var files = inputObj.prop('files');
			if(files.length > 0) {
				var formData;
				formData = new FormData();
				if(type == 'svg') { //非SVG
					formData.append('file', data);
				} else {
					formData.append('file', files[i]);
				}
				formData.append('token', qiniuCfg.qiniuUpToken);
				$.ajax({
					url: 'http://up.qiniu.com',
					type: 'POST',
					data: formData,
					cache: false,
					processData: false,
					contentType: false,
					dataType: 'json',
					async: false,
					success: function(data) {
						fileList.str = qiniuCfg.qiniuUrl + data.key; //+ qiniuCfg.showFormat
					},
					error: function(data) {
						alert("图片上传失败");
					}
				});
			} else {
				console && console.log("upload error");
			}
			return fileList.str;
		}
		//添加图片
		function addImage(src) {
			var image = new Image(),
				end = function() {
					$calc_img.html('');
					$calc_img.append($(this));
					//					console.log($calc_img.height());

					var curSvg = cur.svgData.svg,
						curScale = cur.svgData.scale,
						curBox = cur.svgData.box,
						g = document.createElementNS(ns, 'g'),
						w = $calc_img.width(),
						h = $calc_img.height(),
						dw2 = $diy_svgs.width(),
						dh2 = $diy_svgs.height(),
						t = Date.now(),
						s = w / h,
						state = curBox.width / curBox.height > w / h,
						imgx, imgy,
						imgw, imgh,
						w2 = 26 * curScale;
					if(state) {
						imgh = curBox.height / 4 * 3;
						imgw = imgh * s;
					} else {
						imgw = curBox.width / 4 * 3;
						imgh = imgw / s;
					}
					//					console.log(state, imgw, imgh);
					imgx = curBox.x + (curBox.width - imgw) / 2;
					imgy = curBox.y + (curBox.height - imgh) / 2;

					g.setAttribute('class', 'svg_contain active');
					g.setAttribute('data-time', t);
					g.innerHTML = '<image xlink:href="' + src + '" x="' + imgx + '" y="' + imgy + '" width="' + imgw + '" height="' + imgh + '"/><svg class="svg_edit" x="' + imgx + '" y="' + imgy + '" width="' + imgw + '" height="' + imgh + '"><rect width="100%" height="100%" fill="none" stroke="none" stroke-width="' + (1 * curScale) + '"></rect>' +
						'<image width="' + w2 + '" height="' + w2 + '" x="-' + w2 + '" y="-' + w2 + '" data-type="delete" xlink:href="../../images/3d/btn_4.png"/>' +
						'<image width="' + w2 + '" height="' + w2 + '" x="100%" y="-' + w2 + '" data-type="scale" xlink:href="../../images/3d/btn_5.png"/>' +
						'<image width="' + w2 + '" height="' + w2 + '" x="100%" y="100%" data-type="rotate" xlink:href="../../images/3d/btn_6.png"/>' +
						//'<image width="' + w2 + '" height="' + w2 + '" x="-' + w2 + '" y="100%" data-type="copy" xlink:href="../../images/3d/btn_7.png"/>' +
						'<circle r="1" cx="50%" cy="50%" fill="transparent"></circle>' +
						'</svg>';

					curSvg.appendChild(g);
					addEdit(g, t, 0);
					updateSvg(1);
				};
			image.src = src;
			if(image.complete) {
				end.call(image);
			} else {
				image.onload = end;
			}
		}
		$(document.body).on('mousemove', function(e) {
			if(isDown) {
				if(cur.imageData.type) {
					var s = cur.imageData.sceneScale,
						ox, oy, w, h;
					switch(cur.imageData.type) {
						case 'rotate':
							var rotate = Math.atan2(e.clientY - dataMouse.clientRect.top, e.clientX - dataMouse.clientRect.left) * 180 / Math.PI;
							cur.imageData.rotate = rotate - dataMouse.offsetRotate;
							//							console.log(dataMouse.clientRect);
							break;
						case 'scale':
							var distance = Math.sqrt(Math.pow(e.clientX - dataMouse.clientRect.left, 2) + Math.pow(e.clientY - dataMouse.clientRect.top, 2)) >> 0,
								offsetDistance = (distance - cur.imageData.scaleDistance) * s,
								radian = Math.atan2(e.clientY - dataMouse.clientRect.top, e.clientX - dataMouse.clientRect.left) - (cur.imageData.rotate) / 180 * Math.PI;
							ox = offsetDistance * Math.cos(radian) * 2 >> 0;
							oy = -offsetDistance * Math.sin(radian) * 2 >> 0;
							w = dataMouse.width + ox;
							h = dataMouse.height + oy;
							break;
						default:
							cur.imageData.translateX = dataMouse.translateX + (e.pageX - svgMouse.x) * s;
							cur.imageData.translateY = dataMouse.translateY + (e.pageY - svgMouse.y) * s;
							break;
					}
					if(cur.imageData.type === 'scale') {
						if(w < 0 || h < 0){
							return;
						}
						if(cur.imageData.text) {
							var h2 = h * cur.imageData.aspect2;
							h2 = h2 < 12 * s ? 12 * s : h2;
							cur.imageData.size = h2;
							cur.imageData.text.setAttribute('font-size', h2);

							var b = cur.imageData.text.getBBox();
							w = b.width,
								h = b.height;
							cur.imageData.width = w;
							cur.imageData.height = h;

							var x = cur.imageData.x + (dataMouse.width - cur.imageData.width) / 2,
								y = cur.imageData.y + (dataMouse.height - cur.imageData.height) / 2;
							var l = getFontLine(cur.imageData.family).line;
							cur.imageData.text.setAttribute('x', x);
							cur.imageData.text.setAttribute('y', y + cur.imageData.height * l);
							cur.imageData.editBox.setAttribute('x', x);
							cur.imageData.editBox.setAttribute('y', y);
						} else {
							if(w / h > cur.imageData.aspect) {
								w = h * cur.imageData.aspect;
							} else {
								h = w / cur.imageData.aspect;
							}

							cur.imageData.width = w;
							cur.imageData.height = h;
							cur.imageData.width = Math.max(0, w);
							cur.imageData.height = Math.max(0, h);
							var x = cur.imageData.x + (dataMouse.width - cur.imageData.width) / 2,
								y = cur.imageData.y + (dataMouse.height - cur.imageData.height) / 2;

							cur.imageData.image.setAttribute('x', x);
							cur.imageData.image.setAttribute('y', y);
							cur.imageData.editBox.setAttribute('x', x);
							cur.imageData.editBox.setAttribute('y', y);

							cur.imageData.image.setAttribute('width', cur.imageData.width);
							cur.imageData.image.setAttribute('height', cur.imageData.height);
						}

						cur.imageData.editBox.setAttribute('width', cur.imageData.width);
						cur.imageData.editBox.setAttribute('height', cur.imageData.height);
						cur.imageData.contain.setAttribute('transform', 'rotate(' + cur.imageData.rotate + ',' + dataMouse.center.x + ',' + dataMouse.center.y + ')');
					} else {
						cur.imageData.contain.setAttribute('transform', 'translate(' + cur.imageData.translateX + ',' + cur.imageData.translateY + ') rotate(' + cur.imageData.rotate + ',' + dataMouse.center.x + ',' + dataMouse.center.y + ')');
					}
				}
			}
		});
		$('.diy_svgs').on('mouseup', function(e) {
			if(isDown) {
				return;
			}
			if(cur.imageData && cur.imageData.active) {
				cur.imageData.active = false;
				cur.imageData.contain.setAttribute('class', 'svg_contain');
			}
		});
		$(document.body).on('mouseup', function(e) {
			if($tishidialog0.css('display') === 'block'){
				clearTimeout(tishidialog_id);
				$tishidialog0.fadeOut(500);
				
			}
			if(isDown) {
				isDown = false;
				if(cur.imageData.type) {
					if(cur.imageData.type === 'scale') {
						var box;
						if(cur.imageData.image) {
							box = cur.imageData.image.getBBox();
						} else {
							box = cur.imageData.text.getBBox();
						}
						cur.imageData.x = box.x;
						cur.imageData.y = box.y;
					} else if(cur.imageData.type === 'rotate') {
						//cur.contain.setAttribute('transform', 'rotate(' + cur.imageData.rotate + ',' + cur.imageData.center.x + ',' + cur.imageData.center.y + ')');
					} else if(cur.imageData.type === 'translate') {
						cur.imageData.x += cur.imageData.translateX;
						cur.imageData.y += cur.imageData.translateY;
						if(cur.imageData.image) {
							cur.imageData.image.setAttribute('x', cur.imageData.x);
							cur.imageData.image.setAttribute('y', cur.imageData.y);
						} else {
							cur.imageData.text.setAttribute('x', cur.imageData.x);
							var l = getFontLine(cur.imageData.family).line;
							cur.imageData.text.setAttribute('y', cur.imageData.y + cur.imageData.height * l);
						}
						cur.imageData.editBox.setAttribute('x', cur.imageData.x);
						cur.imageData.editBox.setAttribute('y', cur.imageData.y);
						cur.imageData.translateX = 0;
						cur.imageData.translateY = 0;

						var box;
						if(cur.imageData.image) {
							box = cur.imageData.image.getBBox();
						} else {
							box = cur.imageData.text.getBBox();
						}
						cur.imageData.center = {
							x: box.x + box.width / 2,
							y: box.y + box.height / 2
						};
						cur.imageData.contain.setAttribute('transform', 'rotate(' + cur.imageData.rotate + ',' + cur.imageData.center.x + ',' + cur.imageData.center.y + ')');
					}
					cur.imageData.type = '';
					updateSvg(2);
				}
				return;
			}
		});
		//局部变色
		/*$diy_svgs.on('click', function(e) {
			if(svgs_tab_index === 0) {
				var that = e.target;
				if('use,path,rect,circle,polygon'.indexOf(that.nodeName) > -1) {
					if(activeColor) {
						activeColor.removeAttribute('data-active');
					}
					activeColor = that;
					activeColor.setAttribute('data-active', 'true');
				}
			}
		});*/

		//保存设计
		$('.save_btn').on('click', function() {
			$woddz_mask.eq(1).css('display', 'block');
			return false;
		});
		$('.btn_105').on('click', function() {
			$woddz_mask.eq(0).css('display', 'block');
			$woddz_mask.eq(1).css('display', 'none');
		});
		//弹窗关闭按钮
		$('.title>span').on('click', function() {
			$woddz_mask.css('display', 'none');
		});

		//else
		$(window).on('resize', winResize);
		winResize();

		//		$('body').css('overflow', 'visible');
		$loadMask.remove();
	}

	function updateSvg(type) {
		if(type === 1) {
			var g = svg.querySelector('[data-name="part-' + cur.svgData.name + '"]');
			g.appendChild(cur.imageData.contain.cloneNode(true));
		} else if(type === 2) {
			var contain = svg.querySelector('[data-time="' + cur.imageData.time + '"]');
			contain.outerHTML = cur.imageData.contain.outerHTML;
		} else if(type === 3) {
			var s = cur.svgData.svg.cloneNode(true),
				g0 = $(s).children()[0],
				$c = $($(s)[0].querySelectorAll('.svg_contain')),
				g1 = svg.querySelector('[data-name="part-' + cur.svgData.name + '"]');
			$c.each(function() {
				g0.appendChild(this.cloneNode(true));
			});
			g1.innerHTML = g0.innerHTML;
			$c = null;
			g0 = null;
		}
		canvasToSvg();
	}

	//canvas纹理部分
	var canvas0 = document.getElementsByClassName("canvas0")[0],
		canvas1 = document.getElementsByClassName("canvas1")[0],
		ctx0 = canvas0.getContext('2d'),
		ctx1 = canvas1.getContext('2d');

	function canvasToSvg(callback) {
		canvg(canvas0, svg.outerHTML, {
			log: true,
			ignoreAnimation: true,
			ignoredimensions: true,
			ignoreClear: true,
			ignoreMouse: true,
			useCORS: true,
			renderCallback: function() {
				var end = function() {
					lianImg && ctx0.drawImage(lianImg, 0, 0, canvas0.width, canvas0.height);

					var w = canvas1.width,
						h = canvas1.height;
					ctx1.clearRect(0, 0, w, h);
					ctx1.fillStyle = 'white';
					ctx1.fillRect(0, 0, w, h);
					ctx1.drawImage(canvas0, 0, 0, w, h);
					canvasTexture && (canvasTexture.needsUpdate = true) && render();
					callback && callback();
				}
				if(lianUrl && !lianImg) {
					lianImg = new Image();
					lianImg.onload = function() {
						end();
					}
					lianImg.src = lianUrl;
				} else {
					end();
				}
			}
		});
	}

	//3d部分
	var scene, camera, renderer, controls, group, mesh, canvasTexture, raycaster, mouse, activeMesh;
	var game_3d = document.getElementsByClassName("game_3d")[0],
		saveImages = document.getElementsByClassName("saveImages")[0],
		sceneWidth = game_3d.offsetWidth,
		sceneHeight = game_3d.offsetHeight - 100,
		game_3d_offset,
		p3d = {
			y: 0,
			z: 0
		},
		backgroundColor = 0x252b39,
		backgroundColor2 = 0xffffff,
		is_controls = false;

	function winResize() {
		game_3d_offset = others.getOffset(game_3d);
		diy_dialog_offset = $diy_dialog.offset();
	}

	function getImage() {
		var img = new Image();
		img.src = renderer.domElement.toDataURL('image/jpeg');
		saveImages.appendChild(img);
		//		document.body.appendChild(img);
	}

	function getMeshImage() {
		var w = sceneWidth * 5,
			h = sceneWidth * 5;
		renderer.setSize(w, h);
		camera.aspect = w / h;
		camera.updateProjectionMatrix();

		var p = {
			x: camera.position.x,
			y: camera.position.y,
			z: camera.position.z
		}
		renderer.setClearColor(backgroundColor2);
		//正面
		camera.position.x = 0;
		camera.position.y = p3d.y;
		camera.position.z = p3d.z;
		camera.lookAt(scene.position);
		render();
		getImage();

		//背部
		camera.position.z = -p3d.z;
		camera.lookAt(scene.position);
		render();
		getImage();

		//左边
		camera.position.z = 0;
		camera.position.x = -p3d.z;
		camera.lookAt(scene.position);
		render();
		getImage();

		//右边
		camera.position.z = 0;
		camera.position.x = p3d.z;
		camera.lookAt(scene.position);
		render();
		getImage();

		//上面
		/*camera.position.y = p3d.z;
		camera.position.x = 0;
		camera.position.z = 0;
		camera.lookAt(scene.position);
		render();
		getImage();*/

		//下面
		/*camera.position.y = -p3d.z;
		camera.position.x = 0;
		camera.position.z = 0;
		camera.lookAt(scene.position);
		render();
		getImage();*/

		//侧面
		camera.position.y = p3d.y;
		camera.position.x = Math.sin(Math.PI / 8) * p3d.z;
		camera.position.z = Math.cos(Math.PI / 8) * p3d.z;
		camera.lookAt(scene.position);
		render();
		getImage();

		//侧面2
		camera.position.y = p3d.y;
		camera.position.x = -Math.sin(Math.PI / 8) * p3d.z;
		camera.position.z = Math.cos(Math.PI / 8) * p3d.z;
		camera.lookAt(scene.position);
		render();
		getImage();

		var w = sceneWidth,
			h = sceneHeight;
		renderer.setSize(w, h);
		camera.aspect = w / h;
		camera.updateProjectionMatrix();

		renderer.setClearColor(backgroundColor);
		camera.position.y = p.y;
		camera.position.x = p.x;
		camera.position.z = p.z;
		camera.lookAt(scene.position);
		render();
		controls.update();
	}
	window.getMeshImage = getMeshImage;

	function initThree() {
		//		console.log(Detector);
		if(!Detector.webgl) {
			//不支持webgl
			$('article,.cus_content,.cus_bottom,.woddz_mask').addClass('hide');
			$google_tishi.removeClass('hide');
			//alert('如无法显示3D部分，请用谷歌浏览器Chrome打开网页，谢谢');
			return;
		}
		Detector.getWebGLErrorMessage(function(e) {
			//alert('如无法显示3D部分，请用谷歌浏览器Chrome打开网页，谢谢');
			console.log(e);
		});
		scene = new THREE.Scene();
		group = new THREE.Group();
		scene.add(group);

		camera = new THREE.PerspectiveCamera(20, sceneWidth / sceneHeight, 1, 10000);
		scene.add(camera);

		renderer = new THREE.WebGLRenderer({
			antialias: true,
			preserveDrawingBuffer: true
		});
		renderer.setClearColor(backgroundColor);
		renderer.setPixelRatio(window.devicePixelRatio);
		renderer.setSize(sceneWidth, sceneHeight);
		game_3d.appendChild(renderer.domElement);

		//light
		scene.add(new THREE.AmbientLight(0x444444));
		var light = new THREE.DirectionalLight(0xbbbbbb);
		window.light = light;
		light.position.set(0, 1, 0).normalize();
		camera.add(light);

		//mesh
		var objLoader = new THREE.OBJLoader();
		console.log('模型开始加载');
		objLoader.load(svgPath + '1.obj', function(object) {
			console.log('模型加载完');

			mesh = object;
			var btnMaterial = new THREE.MeshLambertMaterial({
				side: THREE.FrontSide,
				color: 0xffffff
			});
			var cloneMesh = mesh.clone();
			cloneMesh.traverse(function(child) {
				if(child instanceof THREE.Mesh) {
					child.name = '';
					child.material = new THREE.MeshLambertMaterial({
						side: THREE.BackSide,
						color: 0x888888
					});
				}
			});
			//			mesh.position.y = 0;
			//			mesh.scale.set(0.2, 0.2, 0.2);
			//			mesh.rotation.x = -Math.PI/20;

			var box = new THREE.Box3();
			box.setFromObject(object);
			object.position.sub(box.getCenter());
			var s = box.getSize(),
				maxD = Math.max(s.x, s.y, s.z);
			//			console.log(s, maxD);
			camera.position.z = maxD * 4;
			//			camera.position.y = box.getSize().y * 0.1;

			canvasTexture = new THREE.CanvasTexture(canvas1);
			window.canvasTexture = canvasTexture;

			mesh.traverse(function(child) {
				if(child instanceof THREE.Mesh) {
					if(child.name.toLowerCase().indexOf('button') === 0) {
						child.material = btnMaterial;
					} else if(child.name.toLowerCase().indexOf('collar') > -1) {
						child.material = new THREE.MeshLambertMaterial({
							side: THREE.DoubleSide,
							map: (isTest ? new THREE.TextureLoader().load('../../models/gezi.gif', function() {
								render();
							}) : canvasTexture),
							//																								map: new THREE.TextureLoader().load(svgPath + '123123.png'),
							transparent: true
						});
					} else {
						child.material = new THREE.MeshLambertMaterial({
							side: THREE.FrontSide,
							map: (isTest ? new THREE.TextureLoader().load('../../models/gezi.gif', function() {
								render();
							}) : canvasTexture),
							//																								map: new THREE.TextureLoader().load(svgPath + '123123.png'),
							transparent: true
						});

					}
				}
			});
			//			console.log(mesh);
			mesh.add(cloneMesh);
			scene.add(mesh);

			controls.update();
			render();
			initEvent();
			is_controls = false;

			p3d.y = camera.position.y;
			p3d.z = camera.position.z;
			//			console.log(mesh.children);
			console.log('模型加载完开始渲染');
		}, function(xhr) {
			if(xhr.lengthComputable) {
				$loadMask_num.html(Math.floor(xhr.loaded / xhr.total * 100) + '%');
			}
		});

		mouse = new THREE.Vector2();
		raycaster = new THREE.Raycaster();
		controls = new THREE.OrbitControls(camera, game_3d);
		window.controls = controls;
		if(!isTest) {
			controls.enableKeys = false;
			controls.enablePan = false;
			controls.enableZoom = false;
			//			controls.minPolarAngle = controls.maxPolarAngle = Math.PI / 2 - Math.PI / 10;
			controls.minPolarAngle = controls.maxPolarAngle = Math.PI / 2;
		}
		controls.addEventListener('change', function() {
			is_controls = true;
			render();
		});

		var mx, my;
		game_3d.addEventListener('mousedown', function(e) {
			mx = e.pageX;
			my = e.pageY;
		});
		game_3d.addEventListener('mouseup', function(e) {
			if(Math.abs(e.pageX - mx) < 20 && Math.abs(e.pageY - my) < 20) {
				mouse.x = ((e.pageX - game_3d_offset.left) / sceneWidth) * 2 - 1;
				mouse.y = -((e.pageY - game_3d_offset.top) / sceneHeight) * 2 + 1;
				raycaster.setFromCamera(mouse, camera);
				var intersects = raycaster.intersectObjects(mesh.children);
				if(intersects.length) {
					var object = intersects[0].object,
						name = object.name;
					if(name.toLowerCase().indexOf('button') === 0) {
						return;
					}
					$name_select.val('part-' + name).trigger('change', true);
					//					$('.diy_panel_name li[data-name="part-' + name + '"]').trigger('click', true);
					//					console.log(name);
				}
			}
			if(!is_controls) {

			} else {
				is_controls = false;
			}
		});
		game_3d.addEventListener('mousemove', function(e) {
			mouse.x = ((e.pageX - game_3d_offset.left) / sceneWidth) * 2 - 1;
			mouse.y = -((e.pageY - game_3d_offset.top) / sceneHeight) * 2 + 1;
			raycaster.setFromCamera(mouse, camera);
			var intersects = raycaster.intersectObjects(mesh.children);
			if(intersects.length) {
				var object = intersects[0].object,
					name = object.name;
				if(name.toLowerCase().indexOf('button') === 0) {
					return;
				}
				if(activeMesh && activeMesh.name !== name) {
					activeMesh.material.opacity = 1;
				}
				activeMesh = object;
				activeMesh.material.opacity = 0.8;
				render();
			} else {
				if(activeMesh && activeMesh.material.opacity !== 1) {
					activeMesh.material.opacity = 1;
					render();
				}
			}
		});
	}

	function render() {
		renderer.render(scene, camera);
	}

	//加载
	var loader = new Loading(),
		$loadMask = $('.loadMask'),
		$main = $('main');

	function init() { //主入口
		initSvg();
	}
	loader.init({
		callback: function() {
			init();
		}
	});

	//推荐设计
	var auto = new AutoPlay();
	auto.init({
		scene: query.className('designs_auto')[0],
		callback: function() {

		}
	});
	query.className('left_btn')[0].on('click', function() {
		auto.prev();
	});
	query.className('right_btn')[0].on('click', function() {
		auto.next();
	});
});